<template>
	<view class="content">
		<text class="title">使用教务系统账号登录</text>
		<text class="tips" style="margin-top: 20upx;">忘记密码请联系教务处</text>
		<text class="tips">确认登录即代表同意隐私协议</text>
		<input class="shuru" placeholder="请输入学号" type="number" v-model="number" maxlength="12" />
		<view class="pass">
			<input :password="isPass" type="text" placeholder="请输入密码" v-model="password" maxlength="16" />
			<image @tap="yincang" :src="img" mode="aspectFill"></image>
		</view>
		<view :class="isActive" @tap="login">登 录</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js";
	export default {
		data() {
			return {
				number: '',
				password: '',
				isPass: true
			};
		},
		computed:{
			img(){
				if(this.isPass) {
					return  '../../static/images/eye1.png';
				}
				return '../../static/images/eyes.png';
			},
			isActive(){
				if (!this.validate()) {
					return "btn dis";
				}else{
					return "btn";
				}
			}
		},
		methods: {
			yincang(){
				this.isPass = !this.isPass;
			},
			...mapMutations(['setInfo']),
			login() {
				if (!this.validate()) {
					return;
				}
				var that = this;
				//执行登录
				utils.loading("登录中");
				uni.request({
					url: "http://10.205.130.185:8888/user/login",
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						number: this.number,
						password: this.password
					},
					success: res => {
						utils.hideLoading();
						res = res.data;
						if (res.code == 0) {
							res = res.data;
							uni.setStorageSync("token", res.token);
							that.setInfo({
								user: res.user,
								touch:res.touch,
								star:res.star
							});
							uni.switchTab({
								url: "../index/index"
							});
						} else {
							utils.errorToast(res.errMsg);
						}
				
					},
					fail: () => {
						utils.hideLoading();
						utils.errorToast("网络连接失败");
					},
				});
			},
			validate() {
				if (this.number == null || this.number.length != 12) {
					return false;
				}
				if (this.password == null || this.password.length == 0) {
					return false;
				}
				return true;
			}

		}
	}
</script>

<style>
	.content {
		width: 86%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0px auto;
	}

	.title {
		font-size: 50upx;
		margin-top: 80upx;
	}

	.tips {
		font-size: 30upx;
		color: #666666;
		
	}

	.shuru {
		width: 100%;
		height: 100upx;
		border-bottom: 1px solid #dcdcdc;
		margin-top: 110upx;
		font-size: 36upx;
	}

	.pass {
		width: 100%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #dcdcdc;
		margin-top: 50upx;
	}

	.pass input {
		flex: 1;
		height: 100upx;
		font-size: 36upx;
	}

	.pass image {
		width: 50upx;
		height: 50upx;
	}

	.btn {
		width: 100%;
		height: 90upx;
		border-radius: 50upx;
		font-size: 16px;
		color: #ffffff;
		margin-top: 100upx;
		line-height: 100upx;
		text-align: center;
		background: linear-gradient(to right, #365fff, #36bbff);
	}

	.dis {
		background: linear-gradient(to right, #88a1f9, #9ac6ff);
	}
</style>
